<template>
  <div>
    <div class="ub inputNm">
      <input type="password" class="ub ub-f1" placeholder="旧密码" v-model="oldPwd">
      <div class="ub-img formClear" v-show="oldPwd" @click="oldPwd = ''"></div>
    </div>
    <div class="ub inputNm">
      <input type="password" class="ub ub-f1" placeholder="新密码（6-20位字母数字）" v-model="newPwd">
      <div class="ub-img formClear" v-show="newPwd" @click="newPwd = ''"></div>
    </div>
    <div class="ub inputNm">
      <input type="password" class="ub ub-f1" placeholder="确认密码" v-model="secondPwd">
      <div class="ub-img formClear" v-show="secondPwd" @click="secondPwd = ''"></div>
    </div>
    <div class="confire">
      <div class="ub ub-ac ub-pc" @click="modify">确认修改</div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
import { mapState } from 'vuex';
export default {
  created: function () {
    this.$store.commit('changeHeader', {
      left: '返回',
      right: '',
      middle: '修改密码',
      ifshow: true,
      leftAction: '-1',
      leftIcon: 'leftIcon',
      rightAction: '',
      rightIcon: ''
    });
  },
  data: function () {
    return {
      oldPwd: '',
      newPwd: '',
      secondPwd: ''
    }
  },
  components: {
  },
  computed: mapState(['loginData']),
  methods: {
    modify: function () {
      let me = this;
      let oldPwd = this.$utils.regTest(me.oldPwd, 'password', me);
      if (!oldPwd) {
        this.$store.dispatch('showTx', { text: '请输入正确格式的旧密码' });
        return false;
      }
      let newPwd = this.$utils.regTest(me.newPwd, 'password', me);
      if (!newPwd) {
        this.$store.dispatch('showTx', { text: '请输入正确格式的新密码' });
        return false;
      }
      let secondPwd = this.$utils.regTest(me.secondPwd, 'password', me);
      if (!secondPwd) {
        this.$store.dispatch('showTx', { text: '请输入正确格式的确认密码' });
        return false;
      }
      if (this.oldPwd === this.newPwd) {
        this.$store.dispatch('showTx', { text: '新密码需与旧密码不一致' });
        return false;
      }
      if (this.newPwd !== this.secondPwd) {
        this.$store.dispatch('showTx', { text: '两次输入的密码不一致' });
        return false;
      }
      this.doModify();
    },
    doModify: function () {
      let me = this;
      let userInfo = this.loginData.userInfo;
      let userId = userInfo.userId + '';
      let userMobile = userInfo.userMobile;
      let loginToken = userInfo.token.loginToken;
      let content = {
        userPassword: me.$utils.getMD5(me.oldPwd),
        userMobile: userMobile,
        newPwd: me.$utils.getMD5(me.newPwd),
        userId: userId
      }
      let data = this.$utils.getUserContent(content);
      data.headers.userId = userId;
      data.headers.loginToken = loginToken;
      this.$utils.ajax(data, 'modifyPwd', me, function (data) {
        me.$store.dispatch('showTx', { text: '密码修改成功' });
        console.log(data);
        let timer = setTimeout(function () {
          me.$router.go(-1);
          clearTimeout(timer);
          timer = null;
        }, 2000);
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '../../stylus/base.styl';
.inputNm
  margin: f_times(0.8);
  box-sizing: border-box;
  background-color: #eee;
  >input
    width: 100%;
    height: f_times(2.5);
    background-color: #eee;
    padding: f_times(0.2);
.formClear
  width: f_times(2);
  height: f_times(2);
  background-image: url('form_clear@2x.png');
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: f_times(-1);
.confire
  width: 100%;
  // margin-top:f_times(1);
  padding: f_times(0.8);
  box-sizing: border-box;
  >div
    height: f_times(2.5);
    width: 100%;
    background-color: #843D99;
    box-sizing: border-box;
    color: #fff;
    border-radius: 4px;
</style>